import React from 'react';
import { Form, Input, Checkbox } from 'antd';
import useControlOptions from '../../hooks/useControlOptions';
import { CollapseProps } from './Collapse';

const T = window.$app.t;

const Controller = () => {
  const { id, options, changeControlProps } = useControlOptions<CollapseProps>('collapseProps');

  const change = (key: string, value: string | boolean) => {
    changeControlProps(
      'collapseProps',
      { ...options.collapseProps, [key]: value },
      true
    )
  }
  return (
    <>
      <Form.Item label={T('fieldname')}>
        <Input readOnly value={id} />
      </Form.Item>

      <Form.Item label={T('title')}>
        <Input value={options.collapseProps?.title} onChange={e => change('title', e.target.value)}/>
      </Form.Item>

      <Form.Item label={T('titleEn')}>
        <Input value={options.collapseProps?.titleEn} onChange={e => change('titleEn', e.target.value)}/>
      </Form.Item>

      <Form.Item label={T('defaultOpen')} className='antd-form-item-row'>
        <Checkbox 
          checked={options.collapseProps?.defaultOpen}
          onChange={e => change('defaultOpen', e.target.checked)}/>
      </Form.Item>
    </>
  );
};

export default Controller;